<template>
  <div class="createList-container">
    <el-form class="form-container" :model="postForm" :rules="rules" ref="postForm">
  
  
      <div class="createList-main-container">
        <el-row>
          <el-col :span="21">
            <el-form-item style="margin-bottom: 40px;" prop="title">
              <MDinput name="name" v-model="postForm.title" required :maxlength="100">
                名片信息
              </MDinput>
              <span v-show="postForm.title.length>=26" class='title-prompt'>app可能会显示不全</span>
            </el-form-item>
  
            <div class="postInfo-container">
              <el-row>
  
  
                <el-col :span="12">
                  <el-form-item label-width="80px" label="发布时间:" class="postInfo-container-item">
                    <el-date-picker v-model="postForm.create_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
  
                <el-col :span="12">
                  <el-form-item label-width="80px" label="上次确认:" class="postInfo-container-item">
                    <el-date-picker v-model="postForm.confirm_time" type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间">
                    </el-date-picker>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="3">
                  <span class="label">名片标签</span> </el-col>
                <el-col :span="20">
                  <input-tag placeholder="Add Tag" :on-change="addTags" :tags="tags"></input-tag>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
  
        <el-form-item style="margin-bottom: 40px;" label-width="45px" label="摘要:">
          <el-input type="textarea" class="article-textarea" :rows="1" autosize placeholder="请输入内容" v-model="postForm.content_short">
          </el-input>
          <span class="word-counter" v-show="contentShortLength">{{contentShortLength}}字</span>
        </el-form-item>
  
  
        <div class="editor-container">
        </div>
  
        <div style="margin-bottom: 20px;">
  
        </div>
      </div>
    </el-form>
  
  </div>
</template>

<script>
  import Tinymce from 'components/Tinymce';
  import InputTag from 'vue-input-tag';
  import Upload from 'components/Upload/singleImage3';
  import MDinput from 'components/MDinput';
  import {
    validateURL
  } from 'utils/validate';
  import {
    getArticle
  } from 'api/article';
  import {
    userSearch
  } from 'api/remoteSearch';
  
  export default {
    name: 'articleDetail',
    components: {
      Tinymce,
      MDinput,
      Upload,
      InputTag
    },
    data() {
      const validateRequire = (rule, value, callback) => {
        if (value === '') {
          this.$message({
            message: rule.field + '为必传项',
            type: 'error'
          });
          callback(null)
        } else {
          callback()
        }
      };
      const validateSourceUri = (rule, value, callback) => {
        if (value) {
          if (validateURL(value)) {
            callback()
          } else {
            this.$message({
              message: '外链url填写不正确',
              type: 'error'
            });
            callback(null)
          }
        } else {
          callback()
        }
      };
      return {
        tags: ['123', '123'],
        postForm: {
          title: '', // 文章题目
          content: '', // 文章内容
          content_short: '', // 文章摘要
          source_uri: '', // 文章外链
          image_uri: '', // 文章图片
          source_name: '', // 文章外部作者
          create_time: undefined, // 前台展示时间
          confirm_time: new Date(), // 前台展示时间
          id: undefined,
          platforms: ['a-platform']
        },
        fetchSuccess: true,
        loading: false,
        userLIstOptions: [],
        platformsOptions: [{
            key: 'a-platform',
            name: 'a-platform'
          },
          {
            key: 'b-platform',
            name: 'b-platform'
          },
          {
            key: 'c-platform',
            name: 'c-platform'
          }
        ],
        rules: {
          image_uri: [{
            validator: validateRequire
          }],
          title: [{
            validator: validateRequire
          }],
          content: [{
            validator: validateRequire
          }],
          source_uri: [{
            validator: validateSourceUri,
            trigger: 'blur'
          }]
        }
      }
    },
    computed: {
      contentShortLength() {
        return this.postForm.content_short.length
      },
      isEdit() {
        return this.$route.meta.isEdit // 根据meta判断
        // return this.$route.path.indexOf('edit') !== -1 // 根据路由判断
      }
    },
    created() {
      if (this.isEdit) {
        this.fetchData();
      }
    },
    methods: {
      addTags(tags) {
        console.log(tags)
      },
      fetchData() {
        getArticle().then(response => {
          this.postForm = response.data;
        }).catch(err => {
          this.fetchSuccess = false;
          console.log(err);
        });
      },
      submitForm() {
        this.postForm.display_time = parseInt(this.display_time / 1000);
        console.log(this.postForm)
        this.$refs.postForm.validate(valid => {
          if (valid) {
            this.loading = true;
            this.$notify({
              title: '成功',
              message: '发布文章成功',
              type: 'success',
              duration: 2000
            });
            this.postForm.status = 'published';
            this.loading = false;
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      draftForm() {
        if (this.postForm.content.length === 0 || this.postForm.title.length === 0) {
          this.$message({
            message: '请填写必要的标题和内容',
            type: 'warning'
          });
          return;
        }
        this.$message({
          message: '保存成功',
          type: 'success',
          showClose: true,
          duration: 1000
        });
        this.postForm.status = 'draft';
      },
      getRemoteUserList(query) {
        userSearch(query).then(response => {
          if (!response.data.items) return;
          console.log(response)
          this.userLIstOptions = response.data.items.map(v => ({
            key: v.name
          }));
        })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  @import "src/styles/mixin.scss";
  .title-prompt {
    position: absolute;
    right: 0px;
    font-size: 12px;
    top: 10px;
    color: #ff4949;
  }
  
  .label {
    text-align: right;
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #48576a;
    line-height: 1;
    padding: 11px 12px 11px 0;
    font-weight: bold;
    box-sizing: border-box;
  }
  
  .createList-container {
    position: relative;
    .createList-main-container {
      padding: 40px 45px 20px 50px;
      .postInfo-container {
        position: relative;
        @include clearfix;
        margin-bottom: 10px;
        .postInfo-container-item {
          float: left;
        }
      }
      .editor-container {
        min-height: 500px;
        margin: 0 0 30px;
        .editor-upload-btn-container {
          text-align: right;
          margin-right: 10px;
          .editor-upload-btn {
            display: inline-block;
          }
        }
      }
    }
    .word-counter {
      width: 40px;
      position: absolute;
      right: -10px;
      top: 0px;
    }
  }
</style>

